import React, { PureComponent, Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'umi';
import { Button, Row, Input, Form } from 'antd';
import { GlobalFooter } from 'components';
import { Trans, withI18n } from '@lingui/react';
import { setLocale } from 'utils';
import config from 'utils/config';
import styles from './index.less';
const FormItem = Form.Item;

@withI18n()
@connect(({ loading, dispatch }) => ({ loading, dispatch }))
class Login extends PureComponent {
    render() {
        const { dispatch, loading, i18n } = this.props;

        const handleOk = values => {
            dispatch({ type: 'app/login', payload: values });
        };
        let footerLinks = [
            // {
            //     key: 'github',
            //     title: <GithubOutlined />,
            //     href: 'https://github.com/zuiidea/antd-admin',
            //     blankTarget: true,
            // },
        ];

        if (config.i18n) {
            footerLinks = footerLinks.concat(
                config.i18n.languages.map(item => ({
                    key: item.key,
                    title: <span onClick={setLocale.bind(null, item.key)}>{item.title}</span>,
                }))
            );
        }

        return (
            <Fragment>
                <div className={styles.form}>
                    <div className={styles.logo}>
                        <img alt="logo" src={config.logoPath} />
                        <span>{config.siteName}</span>
                    </div>
                    <Form onFinish={handleOk}>
                        <FormItem name="user_name" rules={[{ required: true }]} hasFeedback>
                            <Input placeholder={i18n.t`Username`} />
                        </FormItem>
                        <FormItem name="password" rules={[{ required: true }]} hasFeedback>
                            <Input type="password" placeholder={i18n.t`Password`} />
                        </FormItem>
                        <Row>
                            <Button
                                type="primary"
                                htmlType="submit"
                                loading={loading.effects.login}
                            >
                                <Trans>Sign in</Trans>
                            </Button>
                            {/* <p>
                                <span className="margin-right">
                                    <Trans>Username</Trans>
                                    ：(18610824157)
                                </span>
                                <span>
                                    <Trans>Password</Trans>
                                    ：(123456)
                                </span>
                            </p> */}
                        </Row>
                    </Form>
                </div>
                <div className={styles.footer}>
                    <GlobalFooter links={footerLinks} copyright={config.copyright} />
                </div>

                {/* <AmapLocation/> */}
            </Fragment>
        );
    }
}

Login.propTypes = {
    form: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object,
};

export default Login;
